<template>
	<msgModal ref="msgModalRef"/>
	<main class="zitiorder">
		<Transition name="msgTitlefade">
            <div class="msgTitleShowModel" v-show='msgTitleShow'>
                <div class="modelInfo">
                    <div class="info">
                        {{ msgTitle }}
                    </div>
                    <div class="footer">
                        <el-button @click="msgSure" class="deleteGood">确定</el-button>
                        <el-button @click="msgTitleShow = false" class="cancel">取消</el-button>
                    </div>
                </div>
            </div>
        </Transition>
		<Transition name="memberRechargeSearch">
			<div class="memberRechargeSearchModel" v-show='memberSearchShow'>
				<div class="modelInfo">
					<div class="numKey">
						<button @click="inputKeyNum" class="key">1</button>
						<button @click="inputKeyNum" class="key">2</button>
						<button @click="inputKeyNum" class="key">3</button>
						<button @click="inputKeyNum" class="key">4</button>
						<button @click="inputKeyNum" class="key">5</button>
						<button @click="inputKeyNum" class="key">6</button>
						<button @click="inputKeyNum" class="key">7</button>
						<button @click="inputKeyNum" class="key">8</button>
						<button @click="inputKeyNum" class="key">9</button>
						<button @click="clearKeyNum" class="key">清空</button>
						<button @click="inputKeyNum" class="key">0</button>
						<button @click="deleteKeyNum" class="key">删除</button>
					</div>
					<div class="footer">
						<el-button @click="memberSearchShow = false" class="cancel">确定</el-button>
						<el-button @click="memberSearchShow = false" class="cancel">取消</el-button>
					</div>
				</div>
			</div>
		</Transition>
		
		<!-- 优化订单详情弹框 -->
		<Transition name="orderDetailModel">
			<div class="orderDetailModel" v-show='orderDetailShow'>
				<div class="modelInfo detail-dialog">
					<div class="detail-header">
						<h3>订单详情</h3>
						<el-button @click="orderDetailShow = false" class="close-btn" type="text">
							<i class="el-icon-close"></i>
						</el-button>
					</div>
					<div class="detail-content">
						<table class="detail-table">
							<thead>
								<tr>
									<th class="product-name">商品名称</th>
									<th class="product-price">单价</th>
									<th class="product-quantity">数量</th>
									<th class="product-total">总价</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(data,index) in orderInfoDetail" :key="index">
									<td class="product-name">{{ data.goodName }}</td>
									<td class="product-price">￥{{ data.goodPrice }}</td>
									<td class="product-quantity">× {{ data.goodNum }}</td>
									<td class="product-total">￥{{ data.allPrice }}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="detail-footer">
						<el-button @click="orderDetailShow = false" type="primary">关闭</el-button>
					</div>
				</div>
			</div>
		</Transition>
		
		<div class="page-header">
			<h2>自提订单管理</h2>
		</div>
		<div class="ordertop">
			<div class="search-container">
				<el-input 
					class="fromInput" 
					@click="memberSearchShow = true;" 
					v-model="phoneNumSearch" 
					placeholder="请输入手机号查询" 
					prefix-icon="el-icon-search"
				></el-input>
				<el-button @click="searchOrderInfo" type="primary" class="search-button">查询</el-button>
			</div>
		</div>
		<div class="table-container">
			<table class="orderinfo">
				<thead class="headerinfo">
					<tr class="tr">
						<td class="title">自提信息</td>
						<td class="title">金额</td>
						<td class="title">数量</td>
						<td class="title">时间</td>
						<td class="title">状态</td>
						<td class="operation">操作</td>
					</tr>
				</thead>
				<tbody class="forminfo">
					<tr class="tr" v-for="(data,index) in orderList" :key="index">
						<td class="title">{{ data.pickName }}({{ data.pickPhone }})</td>
						<td class="title price">￥{{ data.allPrice }}</td>
						<td class="title">{{ data.allNum }}</td>
						<td class="title">{{ data.created_at }}</td>
						<td class="title">
							<span class="status-tag" :class="getStatusClass(data.status)">{{ data.statusTitle }}</span>
						</td>
						<td class="operation">
							<el-button @click="orderDetail(data.id)" type="info" size="small" class="action-button">详情</el-button>
							<el-button @click="orderComplete(data.id)" v-if="data.status == 2" type="success" size="small" class="action-button">取货</el-button>
						</td>
					</tr>
					<tr v-if="!orderList || orderList.length === 0">
						<td colspan="6" class="empty-data">暂无数据</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- 添加分页组件 -->
		<div class="pagination-container">
			<el-pagination
				background
				layout="total, prev, pager, next"
				:total="total"
				:page-size="pageSize"
				:current-page="currentPage"
				:prev-text="'上一页'"
				:next-text="'下一页'"
				:pager-count="7"
				@current-change="handleCurrentChange"
			>
				<template #total>
					总数：{{ total }}
				</template>
			</el-pagination>
		</div>
    </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import '../assets/zitiorder.css'
import useApi from '../useApi';
import msgModal from '../components/msgModal.vue'
import { onMounted } from 'vue';

// 添加分页相关变量
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

onMounted(() => {
	searchOrderInfo();
});

const msgModalRef = ref(msgModal);
const showModal = (title,times=1000) => {
	if(msgModalRef.value){
		msgModalRef.value.openMsg(title,times);
	}
}
const inputKeyNum =  (event) =>  {
    phoneNumSearch.value = phoneNumSearch.value+event.target.innerText;
}
const deleteKeyNum =  () =>  {
    phoneNumSearch.value = phoneNumSearch.value.substring(0,phoneNumSearch.value.length-1);
}
const clearKeyNum =  () =>  {
	phoneNumSearch.value = '';
}
let phoneNumSearch = ref(''),memberSearchShow = ref(false),orderList:any = ref([]),optionType = ref(1);
let orderDetailShow = ref(false),orderInfoDetail:any = ref({}),msgTitleShow = ref(false),msgTitle = ref(''),thisOrderId = ref(0);

// 获取状态样式类
const getStatusClass = (status) => {
	switch(status) {
		case 1: return 'status-pending';
		case 2: return 'status-success';
		case 3: return 'status-cancel';
		default: return '';
	}
}

const orderDetail = async(id) => {
	orderDetailShow.value = true;
	let bodyData = ref({});
    bodyData.value = {
        id:id
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('index/getMallOrderDetail',options); 
    if(res.code == 1){
        orderInfoDetail.value = res.data;
    }else{
        showModal(res.msg);
    }
}
const searchOrderInfo = () =>{
	getOrderInfo();
}
const getOrderInfo = async()=>{
    let bodyData = ref({});
    bodyData.value = {
        phone:phoneNumSearch.value,
        page: currentPage.value,
        pageSize: pageSize.value
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('index/getUserMallOrder',options); 
    if(res.code == 1){
        orderList.value = res.data.data || [];
        total.value = res.data.count || 0;
    }else{
        showModal(res.msg);
    }
}

// 添加分页变化处理函数
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    getOrderInfo();
}
const orderComplete = (id) =>{
	optionType.value = 1;
	msgTitleShow.value = true;
	thisOrderId.value = id;
	msgTitle.value = '确定要完成吗？';
}
const msgSure = async() => {
	let bodyData = ref({});
    bodyData.value = {
        id:thisOrderId.value,
		type:optionType.value
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
	if(optionType.value == 1){
		let res:any = await useApi('index/orderComplete',options); 
		if(res.code == 1){
			getOrderInfo();
		}else{
			showModal(res.msg);
		}
	}else{
		let res:any = await useApi('index/orderReverse',options); 
		if(res.code == 1){
			getOrderInfo();
		}else{
			showModal(res.msg);
		}
	}
	msgTitleShow.value = false;
}
</script> 

<!-- 修复订单详情弹框样式 -->
<style scoped>
.zitiorder {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  color: #303133;
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.fromInput {
  width: 300px;
  margin-right: 15px;
}

.search-button {
  height: 40px;
}

.table-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.orderinfo {
  width: 100%;
  border-collapse: collapse;
}

.headerinfo {
  background-color: #f5f7fa;
}

.headerinfo .tr .title {
  font-weight: bold;
  color: #606266;
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.forminfo .tr .title {
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
  color: #606266;
}

.forminfo .tr:hover {
  background-color: #f5f7fa;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-pending {
  background-color: #e6a23c;
  color: #fff;
}

.status-success {
  background-color: #67c23a;
  color: #fff;
}

.status-cancel {
  background-color: #f56c6c;
  color: #fff;
}

.action-button {
  margin: 0 5px;
}

.operation {
  white-space: nowrap;
}

.empty-data {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 订单详情弹窗样式 */
.orderDetailModel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modelInfo {
  background-color: #fff;
  border-radius: 4px;
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
}

.detail-header {
  text-align: center;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.detail-header h3 {
  margin: 0;
  color: #303133;
}

.detailtitle {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.detailtitle .title {
  padding: 8px;
}

.orderdetailinfo {
  max-height: 400px;
  overflow-y: auto;
}

.orderfooter {
  margin-top: 20px;
  text-align: right;
}

/* 数字键盘样式 */
.numKey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.key {
  padding: 15px;
  font-size: 18px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.key:hover {
  background-color: #f5f7fa;
}

.key:active {
  background-color: #e6e6e6;
}

/* 过渡动画 */
.msgTitlefade-enter-active,
.msgTitlefade-leave-active,
.memberRechargeSearch-enter-active,
.memberRechargeSearch-leave-active,
.orderDetailModel-enter-active,
.orderDetailModel-leave-active {
  transition: opacity 0.3s ease;
}

.msgTitlefade-enter-from,
.msgTitlefade-leave-to,
.memberRechargeSearch-enter-from,
.memberRechargeSearch-leave-to,
.orderDetailModel-enter-from,
.orderDetailModel-leave-to {
  opacity: 0;
}
</style>